<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="查询" name="query">
        <query :bus-name-prefix="busNamePrefix"/>
      </el-tab-pane>
      <el-tab-pane label="列表" name="list">
        <list :bus-name-prefix="busNamePrefix"/>
      </el-tab-pane>
      <el-tab-pane label="详情" name="detail">
        <detail :bus-name-prefix="busNamePrefix"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { bus } from '../../../../../bus'
import list from './tabPage/list'
import query from './tabPage/query'
import detail from './tabPage/detail'
export default {
  name: 'Index',
  components: {
    detail,
    query,
    list
  },
  data() {
    return {
      // 为了方便复制该文件的时候 修改bus名字
      busNamePrefix: '',
      activeName: 'list'
    }
  },
  created() {
    this.busWatch()
  },
  methods: {

    // bus 事件监听 方法集合
    busWatch() {
      // 监听查询按钮是否点击
      bus.$on(`${this.busNamePrefix}Query`, (data) => {
        if (data) {
          this.activeName = 'list'
        }
      })
      // 监听列表查看详情按钮是否点击
      bus.$on(`${this.busNamePrefix}ViewDetail`, (data) => {
        if (data) {
          this.activeName = 'detail'
        }
      })
    },

    // tabs 标签点击改变时候触发
    handleClick() {}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
